<script setup lang="ts">
import { ref, type PropType, computed } from 'vue'
import { getOrdercn } from '@/hooks/useOrderStatus'
import { useCountdownTime } from '@/hooks/useCountdownTime'
import OrderCountdown from './order-countdown.vue'
import type { ApiOrder } from '../types'
import Decimal from 'decimal.js-light'

const $props = defineProps({
  order: {
    type: Object as PropType<ApiOrder>,
    default() {
      return {}
    },
  },
})
const { divTenThousand } = useConvert()
const isCountdown = ref(true)

const info = computed(() => {
  return $props.order.shopOrders.map((item) => item.shopOrderItems).flat(1)
})
/**
 * useCountdownTime 订单待支付倒计时
 * @returns {*} 12:30:00
 */
const time = useCountdownTime($props.order.createTime, $props.order?.timeout.payTimeout)
/**
 * 总价格展示
 */
const tatolPirce = computed(() => {
  return info.value.reduce((pre, item) => divTenThousand(item.dealPrice).mul(item.num).add(pre), new Decimal(0))
})
/**
 * 总数量展示
 */
const tatolNum = computed(() => {
  return info.value.reduce((pre, item) => item.num + pre, 0)
})
/**
 * 导航去订单详情(未支付的订单没有拆分店铺传orderNo即可)
 */
const handleNavToDetail = () => {
  const shopId = $props.order.shopOrders[0].shopId
  const url = `/pages/orderDetail/OrderDetail?orderNo=${$props.order.no}&shopId=${shopId}`
  uni.navigateTo({ url })
}
</script>

<template>
  <view class="unpay__title">
    <view class="unpay__title--name">{{ $props.order.shopOrders[0].shopName }}</view>
    <order-countdown v-if="isCountdown && $props.order.status === 'UNPAID'" class="unpay__countdown" :time="time" @end="isCountdown = false" />
    <!-- <order-countdown class="unpay__countdown" :time="time" @end="isCountdown = false" /> -->
    <view v-else>{{ getOrdercn($props.order.status) }}</view>
  </view>
  <view class="unpay" @click="handleNavToDetail">
    <view :class="{ unpay__left: info.length > 1 }">
      <view v-for="(item, index) in info" :key="index" class="unpay__left-slide">
        <u-image :src="item.image" width="100%" height="100%" border-radius="30" />
        <view class="unpay__left-slide--count">{{ item.num }}</view>
      </view>
    </view>
    <view v-if="info.length === 1" class="unpay__center">
      <view class="unpay__center--name">{{ info[0].productName }}</view>
      <!-- <view class="unpay__center--specs">{{ info[0].specs.join(' ') }}</view> -->
    </view>
    <view class="unpay__right">
      <view class="unpay__right--price">{{ tatolPirce }}</view>
      <view class="unpay__right--num">共{{ tatolNum }}件</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@include b(unpay__title) {
  @include flex;
  justify-content: space-between;
  @include m(name) {
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;
  }
}
@include b(unpay) {
  @include flex(space-between);
  @include e(left) {
    width: 80%;
    overflow-x: auto;
    @include flex(flex-start);
  }
  @include e(center) {
    flex: 1;
    height: 180rpx;
    margin-left: 30rpx;
    @include m(name) {
      font-size: 28rpx;
      font-weight: 700;
      color: #121212;
      margin-bottom: 15rpx;
    }
    @include m(specs) {
      font-size: 24rpx;
      color: #777777;
    }
  }
  @include e(left-slide) {
    width: 200rpx;
    height: 200rpx;
    position: relative;
    flex-shrink: 0;
    margin-right: 6rpx;
    @include m(count) {
      width: 60rpx;
      height: 60rpx;
      color: #fff;
      font-size: 24rpx;
      text-align: center;
      line-height: 60rpx;
      background: rgba($color: #000000, $alpha: 0.6);
      border-radius: 30rpx 0 30rpx 0;
      position: absolute;
      right: 0;
      bottom: 0;
      &::before {
        content: '×';
        font-size: 20rpx;
        color: #fff;
      }
    }
  }
  @include e(right) {
    color: #666;
    text-align: right;
    height: 150rpx;
    @include m(price) {
      font-size: 30rpx;
      font-weight: bold;
      color: #2f2f2f;
      &::before {
        content: '￥';
        font-size: 20rpx;
        color: #2f2f2f;
      }
    }
  }
  @include e(title) {
    height: 90rpx;
    text-align: right;
    color: #f12f22;
    font-size: 24rpx;
  }
}
</style>
